<template>
  <div class="User">
    <!--main-->
    <div class="layout-content">
      <!--面包屑-->
      <div class="top_brd">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/admin' }">后台管理</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/user' }">用户管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!--/面包屑-->
      <!-- 新增按钮 -->
      <div class="add_bat"><el-button type="primary" @click="dialogFormVisible = true">添加用户</el-button></div>
      <!-- /新增按钮 -->
      <!-- 表格 -->
      <div class="table_body">
        <!--添加列表-->
        <el-dialog title="添加用户" :visible.sync="dialogFormVisible">
          <el-form :model="User">
            <el-form-item label="用户名" :label-width="formLabelWidth"><el-input v-model="User.idCard" autocomplete="off"></el-input></el-form-item>
            <el-form-item label="性别" :label-width="formLabelWidth">
              <el-select v-model="User.sex" placeholder="请选择性别">
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="电话" :label-width="formLabelWidth"><el-input v-model="User.phone" autocomplete="off"></el-input></el-form-item>

            <el-form-item label="密码" :label-width="formLabelWidth"><el-input v-model="User.password" autocomplete="off"></el-input></el-form-item>
            <el-form-item label="地址" :label-width="formLabelWidth"><el-input v-model="User.address" autocomplete="off"></el-input></el-form-item>
            <el-form-item label="邮箱" :label-width="formLabelWidth"><el-input v-model="User.email" autocomplete="off"></el-input></el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addUser()">添 加</el-button>
          </div>
        </el-dialog>
        <!--展示列表-->
        <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" style="width: 1600px;height: 450px" :row-class-name="tableRowClassName">
          <el-table-column prop="id" label="用户编号"></el-table-column>
          <el-table-column prop="idCard" label="用户名"></el-table-column>
          <el-table-column label="性别">
            <template prop="sex" slot-scope="scope">
              <span v-if="scope.row.sex == 1">男</span>
              <span v-else>女</span>
            </template>
          </el-table-column>
          <el-table-column prop="phone" label="电话"></el-table-column>
          <el-table-column prop="password" label="密码"></el-table-column>
          <el-table-column prop="address" label="地址"></el-table-column>
          <el-table-column prop="email" label="邮箱"></el-table-column>

          <el-table-column prop="email" label="操作" width="190">
            <template slot-scope="scope">
              <el-button size="mini" @click="findUserById(scope.row.id)" icon="el-icon-edit">编辑</el-button>
              <el-button size="mini" icon="el-icon-delete" type="danger" @click="deleted(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--修改信息界面-->
        <el-dialog title="修改用户信息" :visible.sync="updateFormVisible">
          <el-form>
            <el-form-item label="用户名" :label-width="formLabelWidth"><el-input v-model="d.idCard" autocomplete="off"></el-input></el-form-item>
            <el-form-item label="性别" :label-width="formLabelWidth">
              <el-select v-model="arr[d.sex]" placeholder="请选择性别">
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="电话" :label-width="formLabelWidth"><el-input v-model="d.phone" autocomplete="off"></el-input></el-form-item>

            <el-form-item label="密码" :label-width="formLabelWidth"><el-input v-model="d.password" autocomplete="off"></el-input></el-form-item>
            <el-form-item label="地址" :label-width="formLabelWidth"><el-input v-model="d.address" autocomplete="off"></el-input></el-form-item>
            <el-form-item label="邮箱" :label-width="formLabelWidth"><el-input v-model="d.email" autocomplete="off"></el-input></el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="updateFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="updateUser()">修 改</el-button>
          </div>
        </el-dialog>
      </div>
      <!-- /表格 -->
      <!--分页-->
      <div class="pag" style="float: left">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="tableData.length"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1, //初始页
      pageSize: 5, //    每页的数据
      arr: ['女', '男'],
      tableData: [{}] /*查询所有用户*/,
      User: {},
      d: {} /*查询单个用户*/,
      dialogTableVisible: false,
      dialogFormVisible: false,
      updateFormVisible: false,
      formLabelWidth: '120px'
    };
  },
  methods: {
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function(size) {
      this.pagesize = size;
      console.log(this.pagesize); //每页下拉显示数据
    },
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage;
      console.log(this.currentPage); //点击第几页
    },

    /*颜色*/
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    },

    /*查询用户*/
    /*查询所有用户*/
    findAll() {
      //查询所有
      let _this = this;
      this.$axios
        .get('http://localhost:8087/user/getUser')
        .then(function(res) {
          _this.tableData = res.data;
          console.log(res.data);
        })
        .catch(function(err) {
          alert('查询失败');
        });
    },
    /*单个id查询用户*/
    findUserById(id) {
      this.updateFormVisible = true;
      let _this = this;
      console.log(id);
      this.$axios
        .get('http://localhost:8087/user/getUserById/' + id)
        .then(function(res) {
          _this.d = res.data;
          console.log(res.data);
        })
        .catch(function(err) {
          alert('查询失败');
        });
    },
    /*添加用户*/
    addUser() {
      if (!this.User.idCard) {
        alert('请输入用户名');
        return false;
      }
      if (!this.User.sex) {
        alert('请选择用户性别');
        return false;
      }
      if (!this.User.phone) {
        alert('请输入用户电话');
        return false;
      }
      if (!this.User.password) {
        alert('请输入用户密码');
        return false;
      }
      if (!this.User.address) {
        alert('请输入用户地址');
        return false;
      }
      if (!this.User.email) {
        alert('请输入用户邮箱');
        return false;
      }
      console.log(this.User);
      let _this = this;
      this.$axios
        .post('http://localhost:8087/user/setUser', this.User)
        .then(function() {
          //清空本次保存数据
          alert('用户信息添加成功！');
          _this.User = {};
          _this.dialogFormVisible = false;
          _this.findAll();
        })
        .catch(function(err) {
          alert('保存或编辑用户信息失败，请稍后再试');
        });
    },
    /*修改用户*/
    updateUser() {
      let _this = this;
      console.log('修改用户' + _this.d);
      // 发送axios请求，根据查询一个
      this.$axios
        .post('http://localhost:8087/user/updateUser', _this.d)
        .then(function(res) {
          alert('用户信息修改成功!');
          _this.updateFormVisible = false;
          _this.findAll();
        })
        .catch(function(err) {});
    },
    /*删除用户*/
    deleted(id) {
      let _this = this;
      console.log(id);
      if (window.confirm('确定要删除用户吗？')) {
        // 发送axios请求，根据查询一个
        this.$axios
          .post('http://localhost:8087/user/deletedById/' + id)
          .then(function() {
            _this.findAll();
            alert('用户删除成功！');
          })
          .catch(function(err) {
            console.log(id);
            alert('删除失败,请联系管理员！');
          });
      }
    }
  },
  created() {
    this.findAll();
  }
};
</script>

<style scoped>
.top_brd {
  margin-left: 37px;
  margin-top: 10px;
  width: 100%;
  height: 50px;
}
.add_bat {
  float: right;
  padding-right: 20px;
}
.table_body {
  padding-left: 37px;
}
</style>
